<template>
  <div class="hello">
    <div class="L0">
    	<div class="search-input">
    		<form action="https://www.runoob.com/" target="_blank">
    			<input class="placeholder" id="s" name="s" placeholder="搜索" autocomplete="off">
    		</form>
    
    	</div>
    </div>
    <div class="container">
    	<div class="col nav">
    		<ul class="pc-nav" id="runoob-detail-nav">
				<li v-for="value,index in temm">
					{{value}}
				</li>

    		</ul>
    	</div>
    </div>
    
    <div class="main">
    	<!-- 左边部分 -->
    	<div class="left-column">
    		<span style="text-align: center;">{{test}}</span>
    		<div class="sidebar-box">
    			<ul class="ul1">
					<li v-for="value,index in test1">
						{{value}}
					</li>
    				
    			</ul>
    		</div>
    	</div>
    	<div class="middle">
    		<!-- 中间部分 -->
    		<div class="mi">
    			<span class="a"> HTML表单</span>
    			<span class="aa">HTML颜色</span>
    		</div>
    		<h1>43 <span class="color_h1" style="color: #64854C;">{{name}}</span></h1>
    		<hr color="#000000">
    		<p class="intro">通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。</p>
    		<iframe style="margin-top: -1%;" src="https://www.bilibili.com/video/BV1wY4y1Y7hE" height="600px" width="98%"></iframe>
    		<hr>
    	</div>
    
    </div>
    <div class="right"><span style="text-align: center;">{{stea}}</span></div>
    <div class="right-1">
    	<ul class="ul1">
			<li v-for="value,index in tess">
				{{value}}
			</li>
    		<!-- <li style="margin: 0;"> HTML / CSS</a>
    		</li>
    		<li style="margin: 0;"> JavaScript</a>
    		</li>
    		<li style="margin: 0;"> 服务端</a>
    		</li>
    		<li style="margin: 0;"> 数据库</a>
    		</li>
    		<li style="margin: 0;"> 数据分析</a>
    		</li>
    		<li style="margin: 0;"> 移动端</a>
    		</li>
    		<li style="margin: 0;"> XML 教程</a>
    		</li>
    		<li style="margin: 0;"> ASP.NET</a>
    		</li>
    		<li style="margin: 0;"> Web Service</a>
    		</li>
    		<li style="margin: 0;"> 开发工具</a>
    		</li>
    		<li style="margin: 0;"> 网站建设</a>
    		</li> -->
    	</ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  methods: {
  
  
  		},
		data (){
			return{
				temm:['首页','HTML', 'CSS',' Java', 'ScriptVue', 'Bootstrap' ,
				'NodeJS', 'Python3', 'Python2' ,'Java' ,'C', 'C++' ,'C#', 'Go' ,'SQL', 'Linux' ,'jQuery' ,'本地书签'],
				
				test:"HTML 教程",
				test1:['HTML教程','HTML简介','HTML编辑器',
						'HTML基础','HTML元素','HTML属性',
						'HTML标题','HTML段落','HTML文本格式化',
						'HTML链接','HTML头部','HTMLCSS','HTML图像',
						'HTML表格','HTML列表','HTML区块','HTML布局',
						'HTML表单','HTML框架','HTML颜色','HTML 颜色名'
				],
				
				name:"唐辉",
				
				stea:"分类导航",
				tess:[
					'HTML / CSS','JavaScript','服务端',
					'数据库','数据分析','移动端','XML 教程',
					'ASP.NET','Web Service','开发工具','网站建设'
				],
				
			}
		}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
		background-color: rgb(246, 246, 246);
	}

	* {
		border: 0;
		padding: 0;
	}

	.L0 {
		background-color: rgb(246, 246, 246);
		width: 100%;
		height: 52px;
		text-align: right;
		vertical-align: middle;
	}

	.search-input {
		background-color: rgb(232, 233, 231);
		width: 28.5%;
		height: 52px;
		vertical-align: middle;
		margin-top: 20px;
		transform: translateX(200%);
	}

	.placeholder {
		margin-top: 5px;
		transform: translateX(-1%);
		height: 36px;
		width: 420px;
		border-radius: 6px;
		font-size: 18px;
		border-color: rgb(246, 246, 246, 246);
	}

	.container {
		background-color: rgb(150, 180, 125);
		width: 100%;
		height: 40px;
	}

	.nav ul,
	.nav-sub ul {
		list-style: none;
		white-space: nowrap;
	}

	li,
	ol,
	p,
	ul {
		line-height: 1.5em;
		text-align: center;
		line-height: 40px;
	}

	.nav li,
	.nav-sub li {
		display: inline;
		margin: 0px 20px 0 0;
		color: white;
	}

	.main {
		background-color: white;
		height: 1290px;
		width: 12%;
		margin-left: 150px;
		margin-top: 2%;
		position: absolute;
	}

	.left-column {
		width: 100%;
		height: 40px;
		background-color: rgb(235, 235, 235);
		text-align: center;
		line-height: 40px;
	}

	.sidebar-box {
		background-color: rgb(246, 244, 240);
		width: 95%;
		height: 1200px;
		margin: auto;
		margin-top: 5px;
	}

	.ul1 {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.previous-next {
		width: 75%;
		/* background-color: white; */
		height: 1290px;
		margin: auto;
		background-color: rgb(246, 246, 246);
	}

	.middle {
		width: 462%;
		height: 600px;
		/* background-color: rgb(251, 251, 251); */
		background-color: white;
		/* background-color: green; */

		margin-left: 190px;
		margin-top: -22%;
	}

	.right {
		width: 12%;
		height: 40px;
		background-color: rgb(235, 235, 235);
		transform: translateX(660%);
		margin-top: 3%;
		line-height: 40px;
		text-align: center;

	}

	.mi {
		width: 100%;
		height: 42px;
		background-color: rgb(251, 251, 251);
		/* background-color: green; */
		margin: auto;
		border: 1px solid rgb(251, 251, 251);
	}

	.a {
		line-height: 42px;
	}

	.aa {
		float: right;
		line-height: 42px;
	}

	.intro {
		text-align: left;
		/* margin:0px 0px 50px 0px; */
		font-size: 10px;
		margin-top: 1%;
	}

	.right-1 {
		width: 12%;
		height: 400px;
		background-color: #F6F4F0;
		transform: translateX(660%);
		margin-top: 0%;
	}
</style>